<template>
	<view>
		<u-sticky bgColor="#fff">
			<u-tabs is-scroll="false" active-color="#F16325"  :current="tabIndex" :list="orderStatus" @change="change"></u-tabs>
		</u-sticky>
		<view class="order-list" v-if="list.length>0">			
			<view class="maincard" v-for="(item,index) in list" :key="index" @click="GotoInfo(item)">
				<view class="card-top">
						<view class="card-left">
							<image class="shop_logo" :src="url + item.shop.logo"></image>
							<text class="shop_name">{{item.shop.name}}</text>
						</view>
						<view class="card-right" :style="{'color':item.state == 7?'#5A5A5A':''}">
							{{item.pay_status == 0?"待支付":item.pay_status == 1?"已支付":item.pay_status == 2?"已退款":item.pay_status == 3?"已退货":item.pay_status == 4?"已取消":'售后'}}
						</view>
				</view>
				<view class="card-main">
					<scroll-view class="main-left" scroll-x>						
						<view class="main-left-item-group">
							<view  class="main-left-item" v-for="(goods,index) in item.order_goods" :key="index">
								<view class="image-frame">
									<image :src="goods.goods_image" mode="" style="width: 136rpx;height: 136rpx;"></image>
								</view>								
								<text class="main-left-item-title">{{goods.goods_name}}</text>
							</view>
						</view>
					</scroll-view>
					<view class="main-right">
						<view class="right-price-group">
							<view class="rmb">￥</view>
							<view class="big-money">
								{{ String(item.pay_money).slice(0, -2) }}
							</view>
							<view class="small-money">
								{{ String(item.pay_money).slice(-2) }}
							</view>
						</view>
						<view class="right-bottom-total">
							共{{item.order_goods.length}}件
						</view>
					</view>
					
				</view>				
				<view class="card-btn" v-if="item.state == 1">
					<view class="card-btn1" @click.stop="cancel(item)">
						取消订单
					</view>
					<view class="card-btn2" @click.stop="Pay(item)">
						立即支付
					</view>
				</view>
				<view class="card-btn" v-if='item.state == 2'>
					<view class="card-btn1" @click.stop="urge">
						催发货
					</view>
					<view class="card-btn1" @click.stop="changeaddress(item)">
						修改地址
					</view>
				</view>
				<view class="card-btn" v-if='item.state == 4'>
					<view class="card-btn1" style="border: none;"></view>
					<view class="card-btn3" >
						待评价
					</view>
				</view>
				<view class="card-btn"  v-if='item.state == 7' >
					<view class="card-btn1" style="border: none;"></view>
					<view class="card-btn1" @click.stop="Delete(item)">
						删除订单
					</view>
				</view>
				<view class="card-btn" v-if="item.state == 3">
					<view class="card-btn1">
						查看物流
					</view>
					<view class="card-btn2" @click.stop="querenshou(item)">
						确认收货
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: 'https://admin.cqycgyl.com',
				params:{
					page: 1,
					pagesize: 10,
					state: 0
				},
				loadMoreStatus:"loadmore",
				list: [],
				tabIndex: 0,
				orderStatus: [
					{
						name: '待支付',
						value: 0
					},
					{
						name: '已支付',
						value: 1
					},
					{
						name: '已退款',
						value: 2
					},
					{
						name: '已退货',
						value: 3
					},
					{
						name: '已取消',
						value: 4
					}
				],
				change(e){
					console.log(e)
					this.tabIndex = e
					this.params.state = e
					this.params.page = 1
					this.list =[];
					this.getStoreOrderList()
				}
				
			}
		},
		onLoad(){
			this.getStoreOrderList()
		},
		methods: {
			getStoreOrderList(){
				this.$u.api.order.getStoreOrderList(this.params).then(res => {
					this.list = [...this.list, ...res.data]
					this.params.page = this.params.page + 1;
				})
			},
			onReachBottom(){
				this.getStoreOrderList()
			}
		}
	}
</script>

<style lang="scss" scoped>
.order-list{margin-top: 20rpx;}
	.order-btn-row{ display: flex;}
	.order-btn-right{flex:1;text-align: right;}
	.order-info-row{  display: flex; align-items: center;margin-bottom: 10rpx;}
	.order-info-row label{ flex-shrink: 0;}
	.order-info-row text{ flex:1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
	.subtitle{
		width: 690rpx;
		display: flex;
		align-items: center;
		margin-left: 30rpx;
		margin-top: 12rpx;
		image{
			width: 36rpx;
			height: 36rpx;
		}
		title{
			font-size: 28rpx;
			color: #333333;
			margin-left: 12rpx;
		}
		.watch{
			font-size: 24rpx;
            color: #999999;
			margin-left: auto;
		}
	}
	/deep/ .order-btn-right .u-btn{margin-left: 20rpx !important;}
	/deep/ .u-load-more-wrap{margin:20rpx !important;}
	.maincard{
		width: 690rpx;
		background-color: white;
		border-radius: 16rpx;
		margin-left: 30rpx;
		position: relative;
		margin-top: 20rpx;
		padding: 30rpx;
	}
	
	.card-top{
		width: 630rpx;
		display: flex;
		align-items: center;
	}
	.card-left{
		width: 544rpx;
		height: 24rpx;
		font-size: 28rpx;
		color: #999999;
		line-height: 24rpx;
		display: flex;
		align-items: center;
		image{
			width: 48rpx;
			height: 48rpx;
			border-radius: 8rpx  8rpx  8rpx  8rpx;
		}
		.shop_name{
			font-size: 32rpx;
			color: #202020;
			margin-left: 16rpx;
			font-weight: bold;
		}
	}
	.card-right{
		width: 86rpx;
		height: 24rpx;
		line-height: 24rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
	}
	.card-main{
		width: 630rpx;
		position: relative;
		margin-top: 40rpx;
	}
	.main-left{
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		.main-left-item-group{
			display: flex;
			align-items: center;
			overflow-x: auto;
			.main-left-item{
				flex-shrink: 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 136rpx;
				margin-right: 16rpx;
				.image-frame{
					width: 136rpx;
					height: 136rpx;
					padding: 12rpx;
					background-color: #F5F5F5;
					border-radius: 12rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: center;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.main-left-item-title{
					width: 100%;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
					margin-top: 16rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					text-align: center;
				}
			}
		}
	}
	.main-right{
		position: absolute;
		right: 0;
		top: 0;
		width: 174rpx;
		height: 198rpx;
		background: linear-gradient( 90deg, rgba(255,255,255,0.86) 0%, rgba(255,255,255,0.98) 21%, #FFFFFF 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		display: flex;
		flex-direction: column;
		justify-content: start;
		align-items: flex-end;
		
		.right-price-group{
			display: flex;
			align-items: flex-end;
			margin-top: 22rpx;
			.rmb{
				font-size: 24rpx;
				color: #333333;
				align-self: center;
			}
			.big-money{
				font-size: 36rpx;
				color: #333333;
				font-weight: bold;
			}
			.small-money{
				font-size: 20rpx;
				color: #333333;
				font-weight: bold;
				line-height: 1.8;
			}
		}
	}
	.right-top{
		width: 100%;
		height: 28rpx;
		display: flex;
	}
	.right-top-sp{
		width: 398rpx;
		height: 28rpx;
		line-height: 28rpx;
		color: black;
		font-size: 28rpx;
		margin-left: 12rpx;
		font-weight: bold;
		text-overflow:ellipsis;/*省略号 */
		 white-space:nowrap;/*溢出时不换行 */
		 overflow:hidden;/*溢出时隐藏 */
	}
	.right-top-my{
		width: 88rpx;
		height: 28rpx;
		line-height: 28rpx;
		color: black;
		font-size: 28rpx;
	}
	.gui{
		margin-left:12rpx;
		margin-top: 24rpx;
		font-size: 24rpx;
		color: #888888;
	}
	.money{
		width: 630rpx;
		margin-left: 30rpx;
		height: 30rpx;
		margin-top: 36rpx;
		text-align: right;
		line-height: 30rpx;
		color: black;
		font-size: 40rpx;
	}
	.card-btn{
		width: 388rpx;
		height: 76rpx;
		position: absolute;
		right: 30rpx;
		bottom: 24rpx;
		display: flex;
		justify-content: space-between;
	}
	.card-btnleft{
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		left: 42rpx;
		bottom: 40rpx;
	}
	.card-btn1{
		width: 184rpx;
		height: 76rpx;
		text-align: center;
		line-height: 76rpx;
		border: 1px #CECECE solid;
		color: black;
		font-size: 28rpx;
		border-radius: 38rpx;
	}
	.card-btn3{
		width: 184rpx;
		height: 76rpx;
		text-align: center;
		line-height: 76rpx;
		background-color: #36BE6A;
		color: white;
		border-radius: 38rpx;
		font-size: 28rpx;
	}
	.card-btn2{
		width: 184rpx;
		height: 76rpx;
		text-align: center;
		line-height: 76rpx;
		background-color: #36BE6A;
		color: white;
		border-radius: 38rpx;
		font-size: 28rpx;
	}
	.cancel-tp{
		width: 196rpx;
		height: 90rpx;
		position: absolute;
		left: 28rpx;
		bottom: 85rpx;
	}
</style>
